import Taro from "@tarojs/taro";
import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";
// import { AtButton } from "taro-ui";
import "./index.scss";

interface Props {}

const navStyle: any = {
  // width: 850,
  // width: navList.length * 120,
};

const Nav = (props: any) => {
  const navList: Array<any> = [
    {
      title: "精选",
      id: "index",
    },
    // {
    //   title: "免费",
    //   id: "free",
    // },
    {
      title: "大语文",
      id: "18",
    },
    {
      title: "数学",
      id: "3",
    },
    {
      title: "童书绘本",
      id: "51",
    },
    {
      title: "科学科技",
      id: "15",
    },
    {
      title: "传统文化",
      id: "16",
    },
    {
      title: "人文历史",
      id: "17",
    },
  ];
  const { getDataByCurrentTab } = props;
  const [tabIndex, setTabIndex] = useState<Number>(0);

  const navItemClick: Function = (index: Number) => {
    setTabIndex(index);
    getDataByCurrentTab(index, navList[`${index}`]);
  };

  // const getTabsDomInfo: Function = () => {
  //   const query = Taro.createSelectorQuery();
  //   query
  //     .selectAll(".title")
  //     .boundingClientRect((rec) => {
  //       console.log(rec);
  //     })
  //     .exec();
  // };

  // useEffect(() => {
  //   getTabsDomInfo();
  // });

  return (
    <View className="nav">
      <View className="nav.noScrollBar">
        <View className="navList" style={navStyle}>
          {navList.map((navItem, index) => {
            return (
              <View
                key={navItem.id}
                className={`title ${index === tabIndex ? "active" : null}`}
                onClick={() => navItemClick(index)}
              >
                {navItem.title}
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
};

export default Nav;
